<style scoped lang="scss">
.el-input{
  width: 200px;
}
</style>
<template>
  <div class='public_page'>
    <el-form inline :model="searchParams" ref="refSearchParams">
      <el-form-item label="联系人">
        <el-input v-model="searchParams.name" placeholder="请输入联系人姓名" clearable @clear="getTableList"/>
      </el-form-item>
<!--      <el-form-item label="物流公司">-->
<!--        <el-input v-model="searchParams.companyName" placeholder="请输入物流公司名称" clearable />-->
<!--      </el-form-item>-->
      <el-form-item label="物流公司">
        <el-select v-model="searchParams.companyName" filterable placeholder="请输入物流公司" clearable @clear="getTableList">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="searchTableList">搜 索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Plus" @click="categoryAdd">添 加</el-button>
      </el-form-item>
    </el-form>
    <el-table style="height: 100%;" v-loading="loading" v-on="tableEvent" v-bind="propsRes.table" ref="tableRef" :span-method="mergeRowMethod" >
      <el-table-column align="center" show-overflow-tooltip prop="companyName" min-width="180px" label="物流公司"></el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="name" min-width="150px" label="联系人"></el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="phone" min-width="150px" label="联系电话"></el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="status" min-width="150px" label="使用状态">
        <template #default="scope">
          <el-tag
              :type="scope.row.status === '1' ? 'success' : 'error'"
              disable-transitions
          >{{ scope.row.status === '1' ? '启用' : '禁用' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="deliveredQuantity" width="200px" label="操作">
        <template #default="scope">
          <el-button text size="medium" type="success" @click="categoryEdit(scope.row.id)">编辑</el-button>
          <el-button @click="delList" type="danger" text size="medium">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="public_pagination">
      <el-pagination v-bind="propsRes.pagination" v-on="paginationEvent" />
    </div>
    <addCategory ref="formRef" @ok="getSuccess" @updateList="getTableList"></addCategory>
  </div>
</template>

<script setup>
import useTableProps from '@/hooks/tableList'
import addCategory from "@/views/user/addlogisticsCompany.vue";
import {companyDeleteById, companyFindPage,companyFindById} from "@/api/logisticsCompany.js"
import {postDeliverPageCompanyInformation} from "@/api/deliveryOrder.js";

const message = inject('message')
const { proxy } = getCurrentInstance()
const refSearchParams = ref(null)
const formRef = ref(null);
const searchParams = reactive({
  companyName: '',
  name: ''
})
const options = []

const getTableList = async () => {
  try {
    loading.value = true
    let params = {
      ...searchParams,
      page: propsRes.value.pagination.currentPage,
      row: propsRes.value.pagination.pageSize
    }
    if (date.value?.length>0) {
      params.startDate = date.value[0]
      params.endDate = date.value[1]
    }
    const res = await companyFindPage(params)
    console.log(res);
    // propsRes.value.table.data = res.data.list;
    detailsPageMergeOut(res.data.list)
    setPagination({ current: res.data.page, total: res.data.rowsTotal });
    loading.value = false
  } catch (err) {
    loading.value = false
    console.log(err);
  }
}


const { loading, propsRes, tableEvent, paginationEvent, tableRef, searchTableList,detailId,setPagination,date} = useTableProps({
  searchParams,
  getTableList,
  url: companyFindPage,

})
const getDeliverList = async () => {
  try {
    const res = await postDeliverPageCompanyInformation({})
    res.data.forEach(item => {
      options.push({
        value: item.companyName,
        label: item.companyName
      })
    })
  }
  catch (err){
    console.log(err);
  }
}

const categoryAdd = () => {
  const userState = "add"
  formRef.value.getParent(userState);
};

const categoryEdit = async (id) => {
  const userState = "edit"
  const res = await companyFindById({id: id})
  console.log(res)
  formRef.value.getParent({userState,id,res});
  // console.log(res)
}

const detailsPageMergeOut = (list) =>{
  propsRes.value.table.data = []
  list.forEach((item, mainIndex) => {
    if(Array.isArray(item.connectInfoDtos)){
      item.connectInfoDtos.forEach((val, index) => {
        let content = Object.assign(val, item)
        content.uuid = `${content.id}_${index}`
        content.index = mainIndex + 1 + (propsRes.value.pagination.currentPage - 1) * propsRes.value.pagination.pageSize
        if(index == 0){
          content['rowNum'] = item.connectInfoDtos.length
          content['mainIndex'] = mainIndex + 1
        }
        propsRes.value.table.data.push(content)
      })
    }
  });
  console.log(propsRes.value.table.data,"propsRes.value.table.data")
}
// 合并行
const mergeRowMethod = ({ row, column, rowIndex, columnIndex }) => {
  if(columnIndex < 1 || columnIndex >= 3){
    return {
      rowspan: row.rowNum,
      colspan: 1
    };
  }
}

const delList = async() => {
  try {
    console.log(detailId.value)
    await message.confirmMsg('是否删除该条数据？')
    await companyDeleteById({id: detailId.value})
    message.notify('success','删除成功')
    await getTableList()
  } catch (error) {
    console.log(error)
  }
}

const getSuccess = () => {
  getTableList();
};


onMounted(() => {
  getTableList()
  getDeliverList()
})
</script>

